<template>
  <div>
    <el-card>
      <div class="title">
        <div class="line"></div>
        <div class="txt">{{ title }}</div>
      </div>
      <div class="chart" :id="id"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  components: {},
  props: {
    option: Object,
    id: String,
    title: String,
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    // 当数据发生变化的时候，再去加载图标信息
    // option() {
    //   console.log('检查到父组件变化')
    //   this.myChart.setOption(this.option)
    // }
    option: {
      handler(value) {
        console.log(value, "父组件变化了");

        this.myChart.setOption(value);
      },
      deep: true,
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    console.log(this.id, "id");

    console.log(
      document.getElementById(this.id),
      "document.getElementById(this.id)"
    );

    this.$nextTick(() => {
      this.myChart = echarts.init(document.getElementById(this.id));
      // 使用刚指定的配置项和数据显示图表。
    });
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.title {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  .line {
    width: 6px;
    height: 20px;
    background: rgb(69, 155, 134);
    margin-right: 15px;
  }
  .txt {
    font-size: 18px;
    font-weight: 700;
  }
}
.chart {
  width: 100%;
  height: 50vh;
}
</style>